<template>
	<view class="index_box">
		<view class="no_data_box" v-if="indexList.length<=0&&!loading">
			<u-empty text="暂时无任务" mode="list"></u-empty>
		</view>
		<view
            v-else
		    v-for="(item, index) in indexList"
		    :key="index"
            class="index_item_box"
		>
			<view class="item" @click="goDetail(item)">
				<view class="image"><image :src="item.image" mode="aspectFill"></image></view>
				<view class="status_and_text">
					<!-- 这里后期根据业务逻辑判断 -->
					<view v-if="item.is_user == 1" :class="{'pass':item.user_status == 1,'refuse': item.user_status == 2,'status_view':true}">
						{{item.user_status == 1 ? '已报名' : (item.user_status == 2 ? '未通过' : '申请中')}}
					</view>
					<view class="title">{{ item.name }}</view>
				</view>
				<view class="sa">
					<view class="sa-1">
						<image src="@/static/02.png"></image>
						<text>{{ item.start_end }}</text>
					</view>
					<view class="sa-1">
						<image src="@/static/01.png"></image>
						<text v-if='item.num > 0'>{{ item.ok_num }}/{{ item.num }}人</text>
						<text v-else>无限制</text>
					</view>
				</view>
				<view :class="{'tags':item.tag_text&&item.tag_text.length}">
					<text v-for="(v, i) in item.tag_text" :key="i">{{ v }}</text>
				</view>
			</view>
		</view>
    <my-tabbar :act="0"></my-tabbar>
	</view>
</template>

<script>
import myTabbar from '@/components/myTabbar.vue';
	export default {
        components: {
            myTabbar
        },
		data() {
			return {
				indexList: [],
                page: 1,
				loading:true
			}
		},
		onShow() {
			uni.showLoading({
				title: '任务加载中...'
			});
		  this.loadmore()
		},
        onPullDownRefresh() {
            this.loadmore();
        },
		methods: {
		    scrolltolower() {
		      // this.loadmore()
		    },
		    loadmore() {
                let that = this
                that.$API.getTaskList({
                    page: that.page
                }).then(res => {
                    if (that.page == 1) {
                        that.indexList = [];
                    }
                    res.data.forEach(v => {
                        that.indexList.push(v)
                    });
                    uni.hideLoading();
                    this.loading = false
                }).catch(err => {
                    console.log('err', err)
                })
		    },
		    goDetail(item) {
		        uni.navigateTo({
		            url: '/pages/index/detail?id=' + item.id
		        })
		    }
		}
	}
</script>

<style lang="scss">
	.index_box{
		width: 100%;
		height: auto;
		overflow:hidden;
		.no_data_box{
			width: 100vw;
			height: calc(100vh - 172rpx);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.index_item_box {
		      width: 100%;
		      padding:0 24rpx 24rpx 24rpx;
					box-sizing: border-box;
		      .item {
		          width: 100%;
		          height: auto;
		          display: flex;
		          flex-direction: column;
		          padding: 24rpx;
		          background: #FFFFFF;
		          border-radius: 16rpx;
							box-sizing: border-box;
							overflow: hidden;
		          .image {
								width: 100%;
								height: auto;
								image {
									// aspect-ratio: 3/2;
									width:100%;
									max-height: 308rpx;
								}
		          }
							.status_and_text{
								width: 100%;
								height: auto;
								overflow: hidden;
								display: flex;
								align-items: center;
								margin-top: 20rpx;
								gap:0 16rpx;
								.status_view{
									min-width: 72rpx;
									padding:6rpx 16rpx;
									background: #3037D6;
									border-radius: 4rpx;
									font-size: 24rpx;
									font-weight: 300;
									color: #FFFFFF;
								}
								.pass{
									background: #17B87E;
								}
								.refuse{
									background: #D67630;
								}
								.title {
										width: inherit;
								    height: 56rpx;
								    font-size: 32rpx;
								    font-weight: 500;
								    color: #000000;
								    line-height: 56rpx;
										-webkit-background-clip: text;
										-webkit-text-fill-color: #000;
										font-weight: 500;
										overflow: hidden;
										text-overflow: ellipsis;
										display: inline-block;
										white-space: nowrap;
								}
							}
		          
		          .sa {
		              height: 56rpx;
		              display: flex;
		              flex-direction: row;
		              justify-content: space-between;
		              align-items: center;
		              margin-top: 16rpx;
									padding-bottom:12rpx;
		              .sa-1 {
		                 display: flex;
		                 flex-direction: row;
		                 align-items: center; 
		                 image {
		                     width: 48rpx;
		                     height: 48rpx;
		                     margin-right: 12rpx;
		                 }
		                 text {
		                     height: 56rpx;
		                     font-size: 32rpx;
		                     font-weight: 500;
		                     color: #1ABEAB;
		                     line-height: 56rpx;
		                 }
		              }
		          }
		          .tags {
		              width:100%;
									height: auto;
									display: flex;
									flex-wrap: wrap;
									overflow: hidden;
		              flex-direction: row;
		              align-items: center;
		              border-top: 2rpx solid #ECECEC;
		              padding-top: 24rpx;
									gap: 10rpx 10rpx;
		              text {
		                  color: #30D6C2;
		                  padding: 8rpx 16rpx;
		                  border: 2rpx solid #30D6C2;
		                  border-radius: 6rpx;
		                  font-size: 24rpx;
		              }
		          }
		      }
		  }
			.index_item_box:first-child{
				padding-top:24rpx;
			}
	}
	
</style>
